import React, { Component } from 'react';
import './index.less';
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            traP: { x: 0, y: 0 },
            activeIndex: 0
        };
        this.startP = { x: 0, y: 0 };
        this.endP = { x: 0, y: 0 };
        this.isTracking = false;
        this.handleTouchStart = this.handleTouchStart.bind(this);
        this.handleTouchMove = this.handleTouchMove.bind(this);
        this.handleTouchEnd = this.handleTouchEnd.bind(this);
    }
    componentDidMount() {
        const { component } = this;
        component.addEventListener('touchstart', this.handleTouchStart, false);
        component.addEventListener('touchmove', this.handleTouchMove, false);
        component.addEventListener('touchend', this.handleTouchEnd, false);
        setTimeout(() => {
            this.itemH = component.childNodes[0].offsetHeight;
        }, 0);
    }

    componentWillUnmount() {
        const { component } = this;
        component.removeEventListener(
            'touchstart',
            this.handleTouchStart,
            false
        );
        component.removeEventListener('touchmove', this.handleTouchMove, false);
        component.removeEventListener('touchend', this.handleTouchEnd, false);
    }

    handleTouchStart(e) {
        e.preventDefault();
        e.stopPropagation();
        this.isTracking = true;
        const TA = e.targetTouches[0];
        this.startP.x = TA.screenX;
        this.startP.y = TA.screenY;
        this.initX = this.state.traP.x;
        this.initY = this.state.traP.y;
    }
    handleTouchMove(e) {
        if (!this.isTracking) {
            return;
        }
        const TA = e.targetTouches[0];
        let { traP } = this.state;
        this.endP.x = TA.screenX;
        this.endP.y = TA.screenY;
        traP.x = this.initX + this.endP.x - this.startP.x;
        traP.y = this.initY + this.endP.y - this.startP.y;
        this.setState({ traP });
        console.log('handleTouchMove');
    }
    handleTouchEnd(e) {
        if (!this.isTracking) {
            return;
        }
        this.isTracking = false;
        console.log('handleTouchEnd');
        let { traP } = this.state;
    }
    render() {
        console.log('render', this.itemH);
        const { traP, activeIndex } = this.state;

        return (
            <div ref={node => (this.component = node)}>
                {this.props.children}
            </div>
        );
    }
}

export default Test;
